<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- <style>
        .middle{
            margin-top: -10px;
            width: 100%;
            clear: both;
        }
        .banner{
         
            width:100%;
            height: 340px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            top: -2px;

        }
        .banner>ul{
            width:4560px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            
        }
        .banner>ul>li{

            float: left;
        }
        .banner>ul>li>img{
            width:760px;
        }
        .selections{
            width: 90%;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
          
        }
        p{
    margin-top: 6px;
    margin-left: 8px;
    line-height: 1.5em;
         }

        .selections>a{
            position: absolute;
            top: 0;
            right: 0;

        }

        .selections>div{
            width: 15%;
        
            border: 1px solid #ccc;
            float: left;
            margin: 1% 4%;


        }

        .selections>div>img{
            width: 100%;
        }
        .title{
            /* margin-top: 20px; */
            font-size: 12px;
        }
        .searches{
             width: 60%;
             float: left;
             
        }
       
        .searches>a>input{
        display: inline-block;
        width: 120px;
        text-align: center;
        margin: 20px;
        border-radius: 5px;
        
        }
        .adv{
            float: right;
            width: 20%;

        }
        .adv>img{
            width: 100%;
        }
        .hotFood{
            width: 50%;
            margin-left: 2%;
            /* margin: 0 auto; */
            overflow: hidden;
            float: left;
        }
        .hotFood>a{
            float: right;
        }
        .hotFood>div{
            width: 10%;
            float: left;
            margin: 20px 5%;
        }
        .hotFood>div>a>img{
            width: 100%;
        }
        .person{
            float: right;
            width: 35%;
            overflow: hidden;
            font-size: 12px;
        }
        .person>a{
            float: right;
        }
        .person>ul>li{
          
              position: relative;

        }
        .person>ul>li>img{
            width: 15%;
        }
        .person>ul>li>span{
            display:inline-block;
            width:30% ;
            position: absolute;
           
            top: 20%;
        
        }
        .person>ul>li>div{
            width:30%;
            position: absolute;
            left: 15%;
            top: 50%;
        }
        .person>ul>li>input{
            display: inline-block;
            width: 20%;
            position: absolute;
            right: 0;
            top: 20%;
        }
        .article{
            clear: both;
            width: 90%;
            overflow: hidden;
            /* float: left; */
             margin: 20px auto;
        }
        .article>div{
            width: 60%;
            /* height: 350px; */
            border: 1px solid #ccc;
            float: left;
            margin: 1% 4%;
        }
        .article>a{
            float: right;
        }
        .article>div>img{
            width: 10%;
        }
        .article>ul{
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
        }
        .article>ul>li{
            width: 50%;
            float: left;
            font-size: 12px;
            margin: 10px 0;
        }
        .work{
            display: inline-block;
            width: 40%;
            overflow: hidden;
        }
        .article>div>span{
            overflow: hidden;
        }
        .article>div>span>img{
            width: 30%;
            float: left;
        }
        .try>li{
        margin: 20px 0;
        }
        footer{
height: 80px;
width: 100%;

clear: both;
}

.foot{
width: 100%;
height: 80px;
/* margin: 15px auto ; */

}
.foot p{
text-align: center;
font-size: 8px;
color: rgb(122, 121, 121);
}
.f1{
width: 450px;
height: 2em;
margin:  10px auto;
line-height: 2em;



}
.f1 li{
width: 80px;
font-size: 12px;
text-align: center;
float: left;

}
.f1 li:hover{
    color: darkorange;

}

.fixed{
    position: fixed;
    left: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 10%;
    margin: 0 auto;
    text-align: center;
}
.static{
    width: 100%;
    height: 10%;
    margin: 0 auto;
    text-align: center;
    position: static;
}

    </style> -->
</head>
<link rel="stylesheet" href="same.css">
<script src="js/same.js"></script>
<script src="js/animate.js"></script>
<link rel="stylesheet" href="css/indexinner.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<!-- <script src="js/shouyecaipu.js"></script> -->
<!-- <link rel="stylesheet" href="轮播.css"> -->
<script>
 
   
</script>
<body>
    <div id="header">
    <div class="logo">
        <img src="images/logo.png" alt="">
    </div>
    <ul class="nav01">
        <li><a href="">首页</a ></li>
        <li><a href="Menu1.html">菜谱^ </a>
            <dl></dl>
            <dl>
                <dt>  家常菜</dt>
                    <dd>热菜</dd>
                    <dd>主食</dd>
                    <dd>汤</dd>
                    <dd>早餐</dd>
                    <dd>午餐</dd> 
                    </dl>
             <dl>
                    <dt>中国菜系 </dt>
                    <dd>粤菜</dd>
                    <dd>北方菜</dd>
                    <dd>川菜</dd>
                    <dd>浙菜</dd>
                    <dd>湖北菜</dd>
             </dl>   
               
        </li>
        <li><a href="heath.html">饮食健康^</a>
            <dl></dl>
            <dl>
                <dt>    <a href="heath.html">饮食健康  </a> </dt>
                    <dd>饮食新闻  </dd>
                    <dd><a href="">美容瘦身  </a> </dd>
                    <dd><a href="">饮食小常识</a></dd>
                    <dd><a href="">功能性调理</a></dd>
                    <dd><a href="">清热火    </a></dd> 
                    </dl>
             <dl>
                    <dt> <a href="heath.html">人群膳食 </a></dt>
                    <dd>减肥</dd>
                    <dd>祛痰</dd>
                    <dd>滋阴壮阳</dd>
                    <dd>健脾养胃</dd>
                    <dd>人群膳食</dd>
             </dl>   
             <dl>
                <dt> <a href="heath.html">健康常识 </a></dt>
                <dd>减肥</dd>
                <dd>祛痰</dd>
                <dd>滋阴壮阳</dd>
                <dd>健脾养胃</dd>
                <dd>人群膳食</dd>
         </dl>
         <dl>
            <dt> <a href="heath.html">药膳养生 </a></dt>
            <dd>减肥</dd>
            <dd>祛痰</dd>
            <dd>滋阴壮阳</dd>
            <dd>健脾养胃</dd>
            <dd>人群膳食</dd>
     </dl>   
         
             
       
            </li>
        <li><a  href="ontes.html">笔记</a></li>
      <li>  <input type="text" placeholder="搜索菜谱，菜单，食材，用户" style="display: block; width: 0px;"><input type="button" value="" id="sear"></li>
        <li><input type="button" value="发布">
        <ul>
            <li></li>
            <li><a href="PublishOntes.html">创建笔记</a ></li>
            <li><a href="PublishMenu.html">发布菜谱</a ></li>
        </ul>
        </li>
        <li style="display: block;"><a href="login.html">登录</a>|<a href="zhuce.html">注册</a></li>
         <span></span>
        <div style="clear: both;"></div>
       
        </ul>
    </div>
    <div class="middle">
        <div class="banner" >
            <ul id="bannerUl" style="left: 0;">
                <li><img src="images/k06.jpg" alt="" class="bannerImg"style="width:760px;height:390px;tranform:scale(1,1) " ></li>
                <li><img src="images/k05.jpeg" alt=""class="bannerImg"style="width:760px;height:390px;tranform:scale(1,1)"  ></li>
                <li><img src="images/k08.jpg" alt="" class="bannerImg"style="width:760px;height:390px;tranform:scale(1,1)" ></li>
                <li><img src="images/k09.jpg" alt="" class="bannerImg"style="width:760px;height:390px;tranform:scale(1,1)" ></li>
                <li><img src="images/k10.jpg" alt="" class="bannerImg"style="width:760px;height:390px;tranform:scale(1,1)" ></li>
                <li><img src="images/k11.jpeg" alt=""class="bannerImg"style="width:760px;height:390px;tranform:scale(1,1)" ></li>
            </ul>
        </div>
        <!-- <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              <li data-target="#carousel-example-generic" data-slide-to="3"></li>
              <li data-target="#carousel-example-generic" data-slide-to="4"></li>
              <li data-target="#carousel-example-generic" data-slide-to="5"></li>
              <li data-target="#carousel-example-generic" data-slide-to="6"></li>
            </ol>
          
           
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="..." alt="...">
                <div class="carousel-caption">
                  ...
                </div>
              </div>
              <div class="item">
                <img src="..." alt="...">
                <div class="carousel-caption">
                  ...
                </div>
              </div>
              ...
            </div>
          
          
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div> -->
        <div class="container">
        <div class="selections">
                <h1>每日精选菜谱</h1>
                  <a href="Menu.html" style="color: blue;">更多></a>
         
            </div>
       

        <div class="notes">
            <h1>笔记</h1>
            <a href="ontes.html" style="color: blue;" >更多></a>
            <div class="selection">
                <img src="images/k01.jpg" alt="">
                  <p>早餐时间~简简单单</p>
               <div class="left">
                <img src="images/btouxiang1.PNG" class="imgtouxiang"><span class="name">张小厨厨房</span>
            </div>
            <div class="right">
                <img src="images/bkongxin.PNG" class="imgxin"><span class="zan">114</span>
            </div>
                </div>
                <div class="selection">
                    <img src="images/k02.jpg" alt="">
                  <p>早餐时间~简简单单</p>
               <div class="left">
                <img src="images/btouxiang1.PNG" class="imgtouxiang"><span class="name">张小厨厨房</span>
            </div>
            <div class="right">
                <img src="images/bkongxin.PNG" class="imgxin"><span class="zan">114</span>
            </div>
                        </div>
                        <div class="selection">
                            <img src="images/k03.jpg" alt="">
                            <p>早餐时间~简简单单</p>
                         <div class="left">
                          <img src="images/btouxiang1.PNG" class="imgtouxiang"><span class="name">张小厨厨房</span>
                      </div>
                      <div class="right">
                          <img src="images/bkongxin.PNG" class="imgxin"><span class="zan">114</span>
                      </div>


        </div>
        <div class="selection">
            <img src="images/k04.jpg" alt="">
            <p>早餐时间~简简单单</p>
         <div class="left">
          <img src="images/btouxiang1.PNG" class="imgtouxiang"><span class="name">张小厨厨房</span>
      </div>
      <div class="right">
          <img src="images/bkongxin.PNG" class="imgxin"><span class="zan">114</span>
      </div>


</div>
        </div>
       <div style="overflow: hidden;margin: 0 auto; width: 100%;"> 
         <h1>大家都在搜</h1>
           <div class="searches">
           
          <a href=""><input type="text" value="新型肺炎实时疫情追踪"> </a>
          <a href=""><input type="text" value="家常菜"> </a>
          <a href=""><input type="text" value="快手菜"> </a>
          <a href=""><input type="text" value="下饭菜"> </a>
          <a href=""><input type="text" value="早餐"> </a>
          <a href=""><input type="text" value="凉菜"> </a>
        </div>
         <!-- <div class="adv">
             <img src="images/adv1.jpg" alt="">
         </div> -->
        </div>


        <div class="hotFood">
            <h1>热门食材</h1>
       <a href="" style="color: blue;">更多</a>

        </div>
        <div class="person">
            <h1>食界达人</h1>
            <a href="" style="color: blue;">更多></a>
            <ul>
                <li> <img src="images/btouxiang1.PNG" alt="" >
                <span>颖涵的快厨房</span>
                <div>xxx粉丝</div>
                <input type="button" value="+关注">
                </li>
                <li> <img src="images/btouxiang10.PNG" alt="" >
                    <span>颖涵的快厨房</span>
                    <div>xxx粉丝</div>
                    <input type="button" value="+关注">
                    </li>
                    <li> <img src="images/btouxiang11.PNG" alt="" >
                        <span>颖涵的快厨房</span>
                        <div>xxx粉丝</div>
                        <input type="button" value="+关注">
                        </li>
                        <li> <img src="images/btouxiang12.PNG" alt="" >
                            <span>颖涵的快厨房</span>
                            <div>xxx粉丝</div>
                            <input type="button" value="+关注">
                            </li>
                            <li> <img src="images/btouxiang13.PNG" alt="" >
                                <span>颖涵的快厨房</span>
                                <div>xxx粉丝</div>
                                <input type="button" value="+关注">
                                </li>
            </ul>



        </div>
        <div class="article">
            <h1 style="margin-bottom: 20px;">精彩主题文章</h1>
            <span style=" float:left; width: 50%;  font-size: 12px; margin-top: 50px;">健康开心果，全民开心G0! <br>
                来自:食界大咖秀. <br>
            作者:少油少盐</span>  
            <a href="heathChild.html" style="color: blue;">更多</a>

            <ul>
                <li><a href="heathChild.html#abc">美国开心果陪你一起打破格局，助燃今夏</a></li>
                <li><a href="heathChild.html#abc">时光淬炼的"蔓妙滋味</a></li>
                <li><a href="heathChild.html#abc">乐享厨卫清洁的日式美学-“花王厨卫清洁系列”全新...</a></li>
                <li><a href="heathChild.html#abc">健康专家郑育龙教您如何用橄榄油吃出健康</a></li>
                <li><a href="heathChild.html#abc">健康领鲜,臻享美好生活”松下风冷无霜三门冰箱阵..</a></li>
                <li><a href="heathChild.html#abc">ZAKER《2020全民阅读报告》:二三线城市更爱读书</a></li>
            </ul>

         
        </div>
        <!-- <div class="person">
            <h1>商城精选</h1>
            <a href=""style="color: blue;">更多 </a>
            <ul>
                <li> <img src="images/k07.jpg" alt="" >
                <span>网红酸辣柠檬无骨凤爪200g
                    *2盒/微辣</span>
                    <div style="margin-left: 100px;">29.9</div>
                    <div style="margin-left: 100px;margin-top: 12px;">月售</div>
                </li>
                <li> <img src="images/k08.jpg" alt="" >
                    <span>网红酸辣柠檬无骨凤爪200g
                        *2盒/微辣</span>
                        <div style="margin-left: 100px;">29.9</div>
                        <div style="margin-left: 100px;margin-top: 12px;">月售</div>
                    </li>
                    <li> <img src="images/k10.jpg" alt="" >
                        <span>网红酸辣柠檬无骨凤爪200g
                            *2盒/微辣</span>
                            <div style="margin-left: 100px;">29.9</div>
                            <div style="margin-left: 100px;margin-top: 12px;">月售</div>
                        </li>
                </ul>
                </div> -->
        <div class="article">
            <h1>大家的作品</h1>
          <div>  <img src="images/k01.jpg" alt="">
            <span>涛涛妈咪的作品对照菜谱做出来的作品9775个</span>
            <span class="work">
                <img src="images/k07.jpg" alt="">
                <img src="images/k08.jpg" alt="">
                <img src="images/k09.jpg" alt="">
            </span></div>
            <div><img src="images/k02.jpg" alt="" style="clear:both;">
            <span>涛涛妈咪的作品对照菜谱做出来的作品9775个</span>
            <span class="work">
                <img src="images/k04.jpg" alt="">
                <img src="images/k05.jpg" alt="">
                <img src="images/k06.jpg" alt="">
            </span></div>
           <div> <img src="images/k03.jpg" alt="">
            <span>涛涛妈咪的作品对照菜谱做出来的作品9775个</span>
            <span class="work">
                <img src="images/k01.jpg" alt="">
                <img src="images/k02.jpg" alt="">
                <img src="images/k03.jpg" alt="">
            </span></div>

        </div>
        <!-- <div class="person">
            <h1>食界实验室</h1>
            <ul class="try">
                <li>智能找菜</li>
                <li> 豆果测试题</li>
                <li> 药品</li>
            </ul>
            <h1>  动漫</h1>
            <ul  class="try">
                <li>午饭的诱惑</li>
                <li >暖暖的晚餐</li>
                <li> 汤圆-夜宵</li>
            </ul> 
        </div> -->
</div>
 </div>

<div class="glyphicon glyphicon-arrow-up">

</div>
    <!-- </div> -->
    <footer>
        <div class="foot">
            <ul class="f1">
                <li>关于食界</li>
                <li>食界美食</li>
                <li>意见反馈</li>
                <li>品牌馆</li>
                <li>菜谱大全</li>
            </ul>
            <p>@2016-2020 欢迎访问我们食界 <a href="">唯有爱与美食不可辜负</a> </p>
        </div>



    </footer>

</body>
</html>